Fix `useHomeEnd` on tabs in mac testing by alecgeatches · Pull Request #80374 · WordPress/gutenberg

alecgeatches · 2026-07-16T20:02:19Z

What?

Follow-up to #80373 (otherwise independent, but the fixed test is included in this PR to demonstrate the local failure). That PR should get merged first.

While working on that fix, I noticed that the fixed CI test still always failed locally (Mac + Chromium):

$ npm run test:e2e -- test/e2e/specs/editor/blocks/tabs.spec.js --repeat-each=5 -g "adds and activates a new tab"

  # ...
  ✘  1 [chromium] › specs/editor/blocks/tabs.spec.js:136:3 › Tabs › Editor functionality › adds and activates a new tab when pressing Enter at the end of a tab label (7.0s)
  ✘  2 [chromium] › specs/editor/blocks/tabs.spec.js:136:3 › Tabs › Editor functionality › adds and activates a new tab when pressing Enter at the end of a tab label (6.2s)
  ✘  3 [chromium] › specs/editor/blocks/tabs.spec.js:136:3 › Tabs › Editor functionality › adds and activates a new tab when pressing Enter at the end of a tab label (6.2s)
  ✘  4 [chromium] › specs/editor/blocks/tabs.spec.js:136:3 › Tabs › Editor functionality › adds and activates a new tab when pressing Enter at the end of a tab label (6.2s)
  ✘  5 [chromium] › specs/editor/blocks/tabs.spec.js:136:3 › Tabs › Editor functionality › adds and activates a new tab when pressing Enter at the end of a tab label (6.1s)

Locally the "End" key press in the test was failing to fire, and a new tab was not being created.

Why?

On trunk, try creating a core/tabs block, entering a tab title mid-line, and hitting the Home or End keys:

home-end-trunk.mov

Above I'm hitting home/end inside of the tab title but nothing happens. In this PR branch, the same test:

home-end-fix.mov

Home and end work properly, and also the test above (which utilizes the End key) passes reliably:

$ npm run test:e2e -- test/e2e/specs/editor/blocks/tabs.spec.js --repeat-each=5 -g "adds and activates a new tab"

> gutenberg@23.6.0-rc.1 test:e2e
> npm exec --workspace @wordpress/e2e-tests-playwright -- wp-scripts test-e2e --config playwright.config.ts test/e2e/specs/editor/blocks/tabs.spec.js --repeat-each=5 -g adds and activates a new tab


Running 5 tests using 1 worker

  ✓  1 [chromium] › specs/editor/blocks/tabs.spec.js:136:3 › Tabs › Editor functionality › adds and activates a new tab when pressing Enter at the end of a tab label (2.1s)
  ✓  2 [chromium] › specs/editor/blocks/tabs.spec.js:136:3 › Tabs › Editor functionality › adds and activates a new tab when pressing Enter at the end of a tab label (1.2s)
  ✓  3 [chromium] › specs/editor/blocks/tabs.spec.js:136:3 › Tabs › Editor functionality › adds and activates a new tab when pressing Enter at the end of a tab label (1.1s)
  ✓  4 [chromium] › specs/editor/blocks/tabs.spec.js:136:3 › Tabs › Editor functionality › adds and activates a new tab when pressing Enter at the end of a tab label (1.1s)
  ✓  5 [chromium] › specs/editor/blocks/tabs.spec.js:136:3 › Tabs › Editor functionality › adds and activates a new tab when pressing Enter at the end of a tab label (1.1s)

  5 passed (9.0s)

How?

macOS maps Home and End to scroll commands, so it never performs caret movement in editable content. Other platforms bind the keys to the proper home and end movements.

#79105 recently added use-home-end.js. When the writing flow wrapper is the contentEditable host (an editableRoot block is selected), no browser performs the "correct" movement for home and end. That's specifically addressed in the editing host case, on the assumption that the browser handles everything else. On macOS the browser doesn't handle home and end in the same way, so any editable that holds focus directly (like tab labels) gets no caret movement at all.

Replace the wrapper-specific guard with a slightly broader editable content check. event.target.isContentEditable is true both for the wrapper when it's the editing host and for a nested editable, and false for inputs, textareas, and other focusables, which keep the browser's default behavior.

Testing Instructions

On macOS running on trunk, insert a core/tabs block.
Click in the middle of a tab title.
Press home/end.
See nothing happening.
Repeat the same steps in this PR branch (fix/use-home-end-tabs). See the caret move appropriately.

Automated testing

Run the tab test and see it pass locally on macOS:

npm run test:e2e -- test/e2e/specs/editor/blocks/tabs.spec.js --repeat-each=5 -g "adds and activates a new tab"

Use of AI Tools

Claude for the whole process.

…panels

github-actions · 2026-07-16T20:02:30Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: alecgeatches <alecgeatches@git.wordpress.org>
Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
Co-authored-by: noruzzamans <noruzzaman@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

alecgeatches · 2026-07-16T20:07:09Z

cc @ellatrix since you worked on #79105 and probably can tell me if this is the right solution. Thanks!

github-actions · 2026-07-16T20:07:18Z

Size Change: -4 B (0%)

Total Size: 7.73 MB

📦 View Changed

Filename	Size	Change
`build/scripts/block-editor/index.min.js`	421 kB	-4 B (0%)

_{compressed-size-action}

ellatrix · 2026-07-16T21:38:15Z

Just to be clear, these tests always failed even before #79105, right? You just want to use the logic added in #79105 for "normal" blocks too? Sounds fine to me.

noruzzamans · 2026-07-17T02:36:20Z

Thanks @alecgeatches
Tested on macOS and can confirm the issue and the fix.
Steps

Inserted a core/tabs block on trunk.
Clicked mid-line in a tab title, pressed Home/End.
Repeated on the fix/use-home-end-tabs branch.

Observed

On trunk: Home/End do nothing, caret stays put.
On the fix branch: caret moves to start/end of the tab label as expected.

Confirms the fix works as intended.

Screen.Recording.2026-07-17.at.8.27.22.AM.mov

alecgeatches · 2026-07-17T16:06:14Z

Just to be clear, these tests always failed even before #79105, right? You just want to use the logic added in #79105 for "normal" blocks too? Sounds fine to me.

Yes, these failed before. I checked out #79981 (where these tests were added, merged prior to the editableRoot changes) and ran tests:

$ npm run test:e2e -- test/e2e/specs/editor/blocks/tabs.spec.js

  ✘  1 [chromium] › specs/editor/blocks/tabs.spec.js:53:3 › Tabs › Editor functionality › activates the next tab when the caret moves into its label with the right arrow key (6.2s)
  ✘  2 [chromium] › specs/editor/blocks/tabs.spec.js:84:3 › Tabs › Editor functionality › activates the previous tab when the caret moves into its label with the left arrow key (6.2s)
  ✓  3 [chromium] › specs/editor/blocks/tabs.spec.js:115:3 › Tabs › Editor functionality › switches the active tab and selects the tab list when a tab is clicked while a block in another panel is selected (1.1s)
  ✘  4 [chromium] › specs/editor/blocks/tabs.spec.js:146:3 › Tabs › Editor functionality › adds and activates a new tab when pressing Enter at the end of a tab label (6.2s)
  ✓  5 [chromium] › specs/editor/blocks/tabs.spec.js:188:3 › Tabs › Editor functionality › removes the tab and activates the previous one when pressing Delete on an empty tab label (1.9s)

  3 failed
    [chromium] › specs/editor/blocks/tabs.spec.js:53:3 › Tabs › Editor functionality › activates the next tab when the caret moves into its label with the right arrow key 
    [chromium] › specs/editor/blocks/tabs.spec.js:84:3 › Tabs › Editor functionality › activates the previous tab when the caret moves into its label with the left arrow key 
    [chromium] › specs/editor/blocks/tabs.spec.js:146:3 › Tabs › Editor functionality › adds and activates a new tab when pressing Enter at the end of a tab label

The three locally failing tests all use Home or End keys. We just now have a convenient place to fix this issue after your changes. I'd appreciate an approval if you're okay with the new changes!

alecgeatches added 3 commits July 16, 2026 11:51

Fix tabs test by excluding parent 'Tab Panels' name and counting all …

155bf84

…panels

Extend comment on test fix

842f67e

Fix home/end handling in tabs on mac chromium

e2d1819

alecgeatches self-assigned this Jul 16, 2026

alecgeatches requested a review from ellatrix as a code owner July 16, 2026 20:02

github-actions Bot added the [Package] Block editor /packages/block-editor label Jul 16, 2026

alecgeatches added the [Type] Automated Testing Testing infrastructure changes impacting the execution of end-to-end (E2E) and/or unit tests. label Jul 17, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fix `useHomeEnd` on tabs in mac testing#80374

Fix `useHomeEnd` on tabs in mac testing#80374
alecgeatches wants to merge 3 commits into
trunkfrom
fix/use-home-end-tabs

alecgeatches commented Jul 16, 2026

Uh oh!

github-actions Bot commented Jul 16, 2026 •

edited

Loading

Uh oh!

alecgeatches commented Jul 16, 2026

Uh oh!

github-actions Bot commented Jul 16, 2026

Uh oh!

ellatrix commented Jul 16, 2026

Uh oh!

noruzzamans commented Jul 17, 2026

Uh oh!

alecgeatches commented Jul 17, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

alecgeatches commented Jul 16, 2026

What?

Why?

How?

Testing Instructions

Automated testing

Use of AI Tools

Uh oh!

github-actions Bot commented Jul 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

alecgeatches commented Jul 16, 2026

Uh oh!

github-actions Bot commented Jul 16, 2026

Uh oh!

ellatrix commented Jul 16, 2026

Uh oh!

noruzzamans commented Jul 17, 2026

Uh oh!

alecgeatches commented Jul 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

github-actions Bot commented Jul 16, 2026 •

edited

Loading

alecgeatches commented Jul 17, 2026 •

edited

Loading